<template>
  <view class="index_container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <view class="tab">
      <view class="tab_box">
        <view
          @click="currentIndex = 0"
          :class="currentIndex === 0 ? 'active_tab' : 'init_tab'"
          >常用地址</view
        >
        <view
          @click="currentIndex = 1"
          :class="currentIndex === 1 ? 'active_tab' : 'init_tab'"
          >自用地址</view
        >
      </view>
    </view>

    <!-- 地址列表 -->
    <view class="address_list_box" v-if="currentIndex === 0">
      <view class="address_list_item">
        <view class="address_list_item_left">
          <u-radio
            shape="circle"
            activeColor="rgba(247, 154, 77, 1)"
            size="31.395rpx"
          ></u-radio>
        </view>

        <view class="address_list_item_right">
          <view class="_top_left">
            <text class="_top_left_name">住家</text>
            <text class="_top_left_phone">高雄市某某小區某某路8棟8層808</text>
            <img
              class="_top_left_edit"
              :src="'./static/demo/edit.png'"
              alt=""
              srcset=""
            />
          </view>

          <view class="user_info"> 陳先生 09XX-XXX-XXX </view>
        </view>
      </view>
    </view>

    <view class="empty" v-else>暫無地址</view>

    <view class="add_address_btn" @click="goAddAddress">同城新增</view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import fNavbar from "@/components/module/f-navbar/f-navbar";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";

export default {
  components: {
    fNavbar,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  data() {
    return {
      baseUrl: base.baseUrl,
      systemInfo: base.systemInfo,

      currentIndex: 0,
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  methods: {
    ...mapMutations(["setLoginPopupShow"]),

    // 跳到新增地址
    goAddAddress() {
      uni.navigateTo({
        url: "/pages/my/myAddress/AddAddress/index",
      });
    },
  },
  onPageScroll(e) {},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #f3f3f3;
}

.index_container {
  //   padding-left: 26.163rpx;
  //   padding-right: 26.163rpx;
}

.tab {
  padding: 0 97.674rpx 0 97.674rpx;
  background: #ffffff;
  height: 81.977rpx;

  .tab_box {
    width: 552.907rpx;
    height: 66.279rpx;
    border-radius: 24.419rpx;
    border: 5.233rpx;
    opacity: 0px;
    background: #f79a4d;
    border: 0.3px solid #e6e6e6;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 6.977rpx 0 6.977rpx;

    .active_tab {
      width: 263.372rpx;
      height: 59.302rpx;
      border-radius: 24.419rpx;
      border: 5.233rpx;
      border: 0.3px solid #e6e6e6;

      font-family: "Microsoft JhengHei";
      font-size: 27.907rpx;
      font-weight: 400;

      color: #f79a4d;
      background: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .init_tab {
      width: 263.372rpx;
      height: 59.302rpx;
      border-radius: 24.419rpx;

      font-family: "Microsoft JhengHei";
      font-size: 27.907rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.address_list_box {
  padding-left: 52.326rpx;
  padding-right: 52.326rpx;

  margin-top: 34.884rpx;
}

.address_list_item {
  padding: 17.442rpx;
  border-top: 0.5px solid rgba(109, 109, 109, 0.5);
  border-bottom: 0.5px solid rgba(109, 109, 109, 0.5);
  display: flex;
  //   justify-content: space-between;
  align-items: center;
}

.address_list_item_right {
  width: 55.814rpx;
  flex: 1;
}

._top_left {
  display: flex;
  align-items: center;
}

._top_left_name {
  font-family: "I.Ming";
  font-size: 17.442rpx;
  font-weight: 400;
  color: rgba(247, 154, 77, 1);

  border: 0.5px solid rgba(247, 154, 77, 1);
  background: rgba(255, 255, 255, 1);

  width: 55.814rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: 13.953rpx;
}

._top_left_phone {
  font-family: "I.Ming";
  font-size: 27.907rpx;
  font-weight: 400;
  text-align: left;
  color: rgba(0, 0, 0, 1);
  margin-left: 20.93rpx;
}

._top_left_edit {
  margin-left: 20.93rpx;
}

.user_info {
  font-family: "I.Ming";
  font-size: 27.907rpx;
  font-weight: 400;
  text-align: left;
  color: rgba(74, 74, 74, 1);
  margin-left: 13.953rpx;

  margin-top: 20.93rpx;
 
}

.add_address_btn {
  width: 523.256rpx;
  height: 83.721rpx;
  border-radius: 33.14rpx;
  background: rgba(247, 154, 77, 1);
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  left: 113.372rpx;
  bottom: 69.767rpx;

  font-family: "Microsoft JhengHei";
  font-size: 34.884rpx;
  font-weight: 700;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}
</style>
